<template>
  <div style="margin-left:20px;margin-top:20px;">
    <collapse-tab>
      <el-form :inline="true" :model="queryCondition" label-width="120px">
        <el-form-item label="名称">
          <el-input v-model="queryCondition.name" type="text" placeholder="组织机构名称" style="width:200px;" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryCondition.currentStatus">
            <el-option v-for="item in constant.STATUS_LIST" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input v-model="queryCondition.name" type="text" placeholder="组织机构名称" style="width:200px;" />
        </el-form-item>
        <el-form-item label="任务字典序列">
          <el-select v-model="queryCondition.currentStatus">
            <el-option v-for="item in constant.STATUS_LIST" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="宽度测试">
          <el-select v-model="queryCondition.currentStatus">
            <el-option v-for="item in constant.STATUS_LIST" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="测试">
          <el-select v-model="queryCondition.currentStatus">
            <el-option v-for="item in constant.STATUS_LIST" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容很长很长很">
          <el-input v-model="queryCondition.name" type="text" placeholder="组织机构名称" style="width:200px;" />
        </el-form-item>
      </el-form>
      <div style="height:40px; line-height:40px;">
        <el-button v-permission="'system:organization:organization-list:query'" type="primary" icon="el-icon-search" style="float:right">查询</el-button>
        <el-checkbox v-model="queryCondition.ignoreParent" style="float:right">查询全部</el-checkbox>
        <div class="clearfix" />
      </div>
    </collapse-tab>
    <el-form :inline="true" label-width="100px;" style="margin-top:20px; display:none">
      <el-form-item label="每行显示button个数">
        <el-input
          v-model.number="rowNumber"
          type="number"
          :min="2"
        />
      </el-form-item>
    </el-form>
    <buttonsController ref="controller" :row-number="rowNumber" style="margin-top:20px; display:none">
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
      <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
    </buttonsController>
    <div style="margin-top:10px;">
      <el-tabs v-model="aName" type="border-card">
        <el-tab-pane label="单据多区域" name="1">
          <div class="demo" style="margin-top: 10px; display:none;">
            <el-card>
              <el-row>
                <el-col :span="24">
                  <div class="title"><span>基本信息</span></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                </el-col>
                <el-col :span="8">
                  <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                </el-col>
                <el-col :span="8">
                  <div class="container"><span class="term">城市:</span><span class="detail">烟台市</span></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="container"><span class="term">生日:</span><span class="detail">2014-06-01</span></div>
                </el-col>
                <el-col :span="8">
                  <div class="container"><span class="term">邮箱:</span><span class="detail">zhoudamiao@qq.com</span></div>
                </el-col>
                <el-col :span="8">
                  <div class="container"><span class="term">地址:</span><span class="detail">烟台市芝罘区</span></div>
                </el-col>
              </el-row>
              <div style="display:block;height:1px;width:100%;margin:24px 0;background-color:#dcdfe6;position:relative;" />
              <el-row>
                <el-col :span="24">
                  <div class="title"><span>其他信息</span></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                </el-col>
                <el-col :span="12">
                  <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="container"><span class="term">邮箱:</span><span class="detail">zhoudamiao@qq.com</span></div>
                </el-col>
                <el-col :span="12">
                  <div class="container"><span class="term">地址:</span><span class="detail">烟台市芝罘区</span></div>
                </el-col>
              </el-row>
              <div style="display:block;height:1px;width:100%;margin:24px 0;background-color:#dcdfe6;position:relative;" />
              <el-row>
                <el-col :span="24">
                  <div class="title"><span>额外信息</span></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                </el-col>
                <el-col :span="6">
                  <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                </el-col>
                <el-col :span="6">
                  <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                </el-col>
                <el-col :span="6">
                  <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="container"><span class="term">邮箱:</span><span class="detail">zhoudamiao@qq.com</span></div>
                </el-col>
                <el-col :span="6">
                  <div class="container"><span class="term">地址:</span><span class="detail">烟台市芝罘区</span></div>
                </el-col>
                <el-col :span="6">
                  <div class="container"><span class="term">邮箱:</span><span class="detail">zhoudamiao@qq.com</span></div>
                </el-col>
                <el-col :span="6">
                  <div class="container"><span class="term">地址:</span><span class="detail">烟台市芝罘区</span></div>
                </el-col>
              </el-row>
            </el-card>
          </div>

          <div class="demo" style="margin-top: 10px; display:none;">
            <el-card>
              <div style="display:block;height:1px;width:100%;margin:24px 0;background-color:#dcdfe6;position:relative;">
                <div style="left:50%;transform:translateY(-50%);position:absolute;background-color:#fff;padding:0 20px; color: #303133;font-size:14px;font-weight:900;">基本信息</div>
              </div>
              <!-- <el-row>
                <el-col :span="24">
                  <div class="title"><span>基本信息</span></div>
                </el-col>
              </el-row> -->
              <el-row>
                <el-col :span="8">
                  <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                </el-col>
                <el-col :span="8">
                  <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                </el-col>
                <el-col :span="8">
                  <div class="container"><span class="term">城市:</span><span class="detail">烟台市</span></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="container"><span class="term">生日:</span><span class="detail">2014-06-01</span></div>
                </el-col>
                <el-col :span="8">
                  <div class="container"><span class="term">邮箱:</span><span class="detail">zhoudamiao@qq.com</span></div>
                </el-col>
                <el-col :span="8">
                  <div class="container"><span class="term">地址:</span><span class="detail">烟台市芝罘区</span></div>
                </el-col>
              </el-row>
              <div style="display:block;height:1px;width:100%;margin:24px 0;background-color:#dcdfe6;position:relative;">
                <div style="left:50%;transform:translateY(-50%);position:absolute;background-color:#fff;padding:0 20px; color: #303133;font-size:14px;font-weight:900;">其他信息</div>
              </div>
              <!-- <el-row>
                <el-col :span="24">
                  <div class="title"><span>其他信息</span></div>
                </el-col>
              </el-row> -->
              <el-row>
                <el-col :span="12">
                  <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                </el-col>
                <el-col :span="12">
                  <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="container"><span class="term">邮箱:</span><span class="detail">zhoudamiao@qq.com</span></div>
                </el-col>
                <el-col :span="12">
                  <div class="container"><span class="term">地址:</span><span class="detail">烟台市芝罘区</span></div>
                </el-col>
              </el-row>
              <div style="display:block;height:1px;width:100%;margin:24px 0;background-color:#dcdfe6;position:relative;">
                <div style="left:50%;transform:translateY(-50%);position:absolute;background-color:#fff;padding:0 20px; color: #303133;font-size:14px;font-weight:900;">额外信息</div>
              </div>
              <!-- <el-row>
                <el-col :span="24">
                  <div class="title"><span>其他信息</span></div>
                </el-col>
              </el-row> -->
              <el-row>
                <el-col :span="12">
                  <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                </el-col>
                <el-col :span="12">
                  <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="container"><span class="term">邮箱:</span><span class="detail">zhoudamiao@qq.com</span></div>
                </el-col>
                <el-col :span="12">
                  <div class="container"><span class="term">地址:</span><span class="detail">烟台市芝罘区</span></div>
                </el-col>
              </el-row>
            </el-card>
          </div>
          <div class="demo" style="margin-top: 10px;">
            <el-card>
              <el-collapse v-model="activeName" @change="handleChange">
                <el-collapse-item name="1">
                  <template slot="title">
                    <div style="padding-left:20px;">
                      <i class="el-collapse-item__arrow el-icon-arrow-right is-active" />
                      <span style="font-weight:900">基本信息</span>
                    </div>
                  </template>
                  <el-row>
                    <el-col :span="8">
                      <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">城市:</span><span class="detail">烟台市</span></div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">城市:</span><span class="detail">烟台市</span></div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">城市:</span><span class="detail">烟台市</span></div>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item name="2">
                  <template slot="title">
                    <div style="padding-left:20px;">
                      <i class="el-collapse-item__arrow el-icon-arrow-right is-active" />
                      <span style="font-weight:900">其他信息</span>
                    </div>
                  </template>
                  <el-row>
                    <el-col :span="8">
                      <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">城市:</span><span class="detail">烟台市</span></div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">城市:</span><span class="detail">烟台市</span></div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">城市:</span><span class="detail">烟台市</span></div>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item name="3">
                  <template slot="title">
                    <div style="padding-left:20px;">
                      <i class="el-collapse-item__arrow el-icon-arrow-right is-active" />
                      <span style="font-weight:900">额外信息</span>
                    </div>
                  </template>
                  <el-row>
                    <el-col :span="8">
                      <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">城市:</span><span class="detail">烟台市</span></div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">城市:</span><span class="detail">烟台市</span></div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <div class="container"><span class="term">姓名:</span><span class="detail">周大喵</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">性别:</span><span class="detail">男</span></div>
                    </el-col>
                    <el-col :span="8">
                      <div class="container"><span class="term">城市:</span><span class="detail">烟台市</span></div>
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </el-card>
          </div>
        </el-tab-pane>
        <el-tab-pane label="表格内编辑" name="2">
          <div style="width:1000px; margin-top:10px;">
            <el-button type="primary" icon="el-icon-plus" style="float:right;" @click="add">新增</el-button>
            <div class="clearfix" />
            <el-table
              :data="tableData"
              highlight-current-row
              style="margin-top:5px"
              border
            >
              <el-table-column type="index" label="序号" sortable width="65" />
              <el-table-column label="名称" sortable="custom">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" :disabled="scope.row.disabled" />
                </template>
              </el-table-column>
              <el-table-column label="状态" width="180">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.status" :disabled="scope.row.disabled">
                    <el-option v-for="item in constant.STATUS_LIST" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="上级" width="180">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.parentName" :disabled="scope.row.disabled" />
                </template>
              </el-table-column>
              <el-table-column label="排序" sortable="custom" width="180">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.orderNo" :disabled="scope.row.disabled" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <i class="edit el-icon-edit" @click="toggle(scope.row)" /> &nbsp;&nbsp;
                  <i class="delete el-icon-delete" @click="deleteRow(scope.$index)" />&nbsp;&nbsp;
                  <i class="delete el-icon-document" @click="detail(scope.row)" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="详情" name="3">
          <el-table
            :data="tableData"
            style="width: 100%; margin-top:10px;"
            highlight-current-row
            border
          >
            <el-table-column type="index" label="序号" sortable width="65" />
            <el-table-column prop="name" label="名称" sortable="custom" />
            <el-table-column prop="statusName" label="状态" width="180" />
            <el-table-column prop="parentName" label="上级" width="180" />
            <el-table-column prop="orderNo" label="排序" sortable="custom" width="180" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div style="height:20px;" />
  </div>
</template>

<script>
import CollapseTab from '@/components/CollapseTab'
import ButtonsController from '@/components/ButtonsController'

export default {
  name: 'collapse',
  components: {
    CollapseTab,
    ButtonsController
  },
  data() {
    const list = []
    for (let i = 0; i < 5; i++) {
      list.push({
        name: '名称' + (i + 1),
        status: this.constant.STATUS.NORMAL,
        parentName: '上级',
        orderNo: i + 1,
        disabled: false
      })
    }
    return {
      rowNumber: 10,
      activeName: ['1', '2', '3'],
      aName: '1',
      tableData: list,
      queryCondition: {
        parentId: '',
        name: '',
        currentStatus: this.constant.STATUS.NORMAL,
        ignoreParent: false
      }
    }
  },
  methods: {
    toggle(row) {
      row.disabled = !row.disabled
    },
    add() {
      this.tableData.push({ name: '', status: this.constant.STATUS.NORMAL, parentName: '', orderNo: '', disabled: false })
    },
    deleteRow(index) {
      this.tableData.splice(index, 1)
    },
    detail(row) {
      console.log(row)
      this.aName = '3'
    },
    handleChange(val) {
      console.log('---------', val)
    }
  }
}
</script>

<style lang="scss">
.demo {
  .el-row{
    margin-bottom:16px;
  }
  .el-collapse{
    border: 1px solid #EBEEF5;
    .el-collapse-item__header {
      background-color: #f7f7f7;
    }
    .el-collapse-item__header > i{
      display:none;
    }
    .el-collapse-item__content{
      padding: 20px 0 10px 20px;
    }
  }
  .el-tabs{
    width:800px;
    background-color: #f5f7fa;
    border-top: 0px;
    .el-tabs__header  {
      background-color: #fff;
      .el-tabs__item.is-active{
        background-color: #f5f7fa;
        color: #000;
        font-weight: 900;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.demo {
  font-weight:500;
  font-size:14px;
  .title{
    color:#17233d;
    font-weight:900;
  }
  .container{
    line-height: 20px;
    .term{
      color: #17233d;
    }
    .detail{
      color: #515a6e;
    }
  }
}
.edit,.delete{
  cursor: pointer;
  &:hover{
    color:#1890FF
  }
}
</style>
